<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="history.js"></script>

</head>
<body>
<!-- return push('/test1') 执行返回一个值false，不会跳转-->
<a href="http://www.chengheng.com" onclick="return push('/test1')">push test1</a> <br> <br>

<button onclick="push('/test2')">push test2</button>

<!--替换是把我自己的路径 在要放入栈之前，先把栈顶的移除，在放入-->
<button onclick="replace('/test3')">replace test3</button>

<!--就是当前路径出栈， 显示后面一条栈地址-->
<button onclick="back()">后退</button>

<!--就是显示下一个栈信息-->
<button onclick="forward('')">前进</button>

<script src="history.js"></script>
<script type="text/javascript">
    // 直接使用 H5 推出的 history 身上的api
    let browserHistory = History.createBrowserHistory();

    // hash 值(锚点)
    // let hahHistory = History.createHashHistory();


    function push(path) {
        browserHistory.push(path)
        return false
    }

    function replace(path) {
        browserHistory.replace(path)
    }

    function back() {
        browserHistory.goBack()
    }

    function forward() {
        browserHistory.goForward()
    }

    /**
     * 监听路径变化
     */
    browserHistory.listen((location) => {
        console.log(location)
    })
</script>

</body>
</html>